<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2</title>
    <style>
        .completed{ background: yellowgreen; }
        .red{ background: red; }
    </style>
</head>
<body>
<div id="app">
    {{message}}
    <div><input type="text" v-model="message" /></div>
    <h1>列表数量 {{toCount}}</h1>
    <div>
        <todo-items :msg="msg"></todo-items>
    </div>
    <todo-form :msg="msg"></todo-form>
</div>

<script type="text/x-template" id="todo-items-template">
    <ul>
        <li v-for="(m,index) in msg" v-bind:class="{ 'completed' : m.completed }">
            {{m.title}}
            <span v-on:click="deleteTodo(index)">删除</span>
            <span v-on:click="toggleCompletion(m)" v-bind:class="[m.completed ? 'red' : 'test']">确定</span>
        </li>
    </ul>
</script>

<script type="text/x-template" id="todo-add-form-template">
    <form v-on:submit.prevent="addTodo(newTodo)">
        <input type="text" v-model="newTodo.title">
        <input type="submit" value="提交">
    </form>
</script>

<script type="text/javascript" src="js/vue2.js"></script>
</body>
</html>